<template>
    <!-- mine/pages/personalAccount/personalAccount.wxml -->
	<view :style="objColor">
		<customer></customer>
		<image class="comImg" :src="(mixOtherIconList[5] && mixOtherIconList[5].icon)"></image>
		<view class="infoCon">
			<view class="infoLeft">
				<view class="accountTitle">
					企业钱包余额<text class="infoRecord" @tap="BulletFrame">充值说明</text>
				</view>
				<view class="accountVal">
					￥{{ accountInfo.deductMode == 'TeamAccount' ? '*****' : accountInfo.accountBalance }}<text class="tip" v-if="accountInfo.deductMode == 'TeamAccount'">暂无权限查看</text>
				</view>
			</view>
		</view>
		<view class="personalBox">
		    <!-- 个人账号 -->
		    <!-- <view class="account" v-if="accountType == 1">
		        <view class="account_l">
		            <view class="txt1">{{ accountInfo.accountBalance }}</view>
		            <view class="txt2">
		                账户余额(元)
		                <image @tap="showBalanceFreezeFun" v-if="accountInfo.balanceFreeze" class="tipImg" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/tip.png"></image>
		            </view>
		            <view class="balanceFreeze" v-if="showBalanceFreeze">冻结账户余额{{ accountInfo.balanceFreeze / 100 }}元</view>
		            <view class="txt3" @tap="goRefund">申请退款</view>
		        </view>
		        <view class="account_r">
		            <view class="txt1">{{ accountInfo.jiangLiBalance }}</view>
		            <view class="txt2">
		                奖励余额(元)
		                <image @tap="showJiangLiBalanceFreezeFun" v-if="accountInfo.jiangLiBalanceFreeze" class="tipImg" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/tip.png"></image>
		            </view>
		            <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/accountImg.png"></image>
		            <view class="jiangLiBalance" v-if="showJiangLiBalanceFreeze">冻结奖励金额{{ accountInfo.jiangLiBalanceFreeze / 100 }}元</view>
		        </view>
		    </view>
		    -->
			<!-- 车队账号 -->
		    <!-- <view class="account1" v-if="accountType != 1">
		        <view class="accountMoney">
		            <view class="txt1">{{ accountInfo.deductMode == 'TeamAccount' ? '*****' : accountInfo.accountBalance }}</view>
		            <text class="tip" v-if="accountInfo.deductMode == 'TeamAccount'">暂无权限查看</text>
		        </view>
		        <view class="txt2">车队账户(元)</view>
		        <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/accountImg.png"></image>
		    </view>
		    -->
			<!-- 充值 -->
		    <!-- <view class="setting" v-if="accountType == 1">
		        <Payment @getbalance="getAccountInfo"></Payment>
		    </view> -->
		    <!-- <view class="setting_title">
		      <view>充值</view>
		      <view class="tips">充值金额可能出现延迟到账情况，请稍作等待</view>
		    </view>
		    <view class="priceType">
		      <view class="type {{priceType==index?'type_action':''}}" wx:for="{{priceTypeList}}" wx:key="index" data-index="{{index}}" bindtap="checkPriceType">
		        {{item}}元
		      </view>
		      <view class="custom">
		        <image class="custom_img" src="../../images/Editor.png"></image>
		        <input class="custom_input" type='digit' value="{{customPrice}}"  bindinput='getCustomPrice' placeholder="自定义" />元
		      </view>
		    </view>
		    <view class="setting_btn" bindtap="toCharge">去充值</view> -->
			<!-- 收支记录 -->
		    <view class="record">
		        <view class="record_top">
		            <view class="title">收支记录</view>
		            <view class="more" @tap="goReRecord">
		                查看更多
										<uni-icons class="txtIcon" type="right" size="18" :color="objColor2.textColor"></uni-icons>
		            </view>
		        </view>
		        <view class="record_item" v-if="recordsList.length > 0" v-for="(item, index) in recordsList" :key="index">
		            <view class="itemDisplay">
		                <view class="itemTitle">
		                    <view class="name">
		                        {{ item.eventNameStr }}
		                        <text v-if="item.busId">({{ item.busId }})</text>
		                    </view>
		                </view>
		                <view :class="item.amountChange > 0 ? 'changeAmount1' : 'changeAmount'">{{ item.amountChange > 0 ? '+' + item.amountChange : item.amountChange }}</view>
		            </view>

		            <view class="itemDisplay">
		                <view class="balance">
		                    余额：
		                    <view class="money">{{ item.accountBalance }}</view>
		                </view>
		                <view class="time">{{ item.createTime }}</view>
		            </view>
		        </view>
		        <view v-if="recordsList.length == 0">
		            <Upgrading text="暂无收支记录"></Upgrading>
		            <view class="goCharing" @tap="goCharing">去充电</view>
		        </view>
		        <!-- <view class="record_item">
		  <view class="itemDisplay">
		    <view class="itemTitle"><view class="name">南方众悦奥体充电站南方众悦奥体充电站</view><view class="tag">退款核销</view></view>
		    <view class="changeAmount1">+79.25</view>
		  </view>
		  <view class="itemDisplay">
		    <view class="balance">余额：<view class="money">46.20</view>
		    </view>
		    <view class="time">2022-05-20 13:23:23</view>
		  </view>
		</view> -->
		    </view>
		</view>


		<uni-popup ref="showBulletFrame" background-color="#fff" safe-area type="center">
			<view class="BulletFrameCon">
				<view class="bulletTitle">
					{{frame.title}}
				</view>
				<view class="bulletVal">
					{{frame.val}}
				</view>
				<view class="bulletButton" @tap="showFrame">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';
import Payment from '@/components/payment/payment';

	// exports.__esModule = true; // mine/pages/personalAccount/personalAccount.ts

	var app = getApp();

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			Upgrading,
			Payment
		},
		data() {
			return {
				frame:{
					title:'充值说明',
					val:''
				},
				showBalanceFreeze: false,
				showJiangLiBalanceFreeze: false,
				accountType: 1,

				accountInfo: {
					accountBalance: '',
					balanceFreeze: '',
					jiangLiBalance: '',
					jiangLiBalanceFreeze: '',
					deductMode: ''
				},

				priceType: 0,
				customRechargePrice: 30,
				priceTypeList: [30, 50, 100, 150],
				customPrice: '',

				//收支记录
				recordsList: [],

				orderNo: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.tab) {
				this.accountType= options.tab
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
			if (this.accountType == 1) {
				uni.setNavigationBarTitle({
					title: '个人账号'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '车队账号'
				});
			}

			this.getAccountInfo();
			this.getPageList();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function () {},
		methods: {
			showJiangLiBalanceFreezeFun: function () {
				this.showJiangLiBalanceFreeze= !this.showJiangLiBalanceFreeze
			},

			showBalanceFreezeFun: function () {
				this.showBalanceFreeze= !this.showBalanceFreeze
			},

			//账户信息
			getAccountInfo: function () {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				https_1
					.getAccountInfo({
						tab: this.accountType
					})
					.then(function (res) {
						if (res.code == 0) {
							var data = res.data;
							data.accountBalance = (data.accountBalance / 100).toFixed(2);
							data.jiangLiBalance = (data.jiangLiBalance / 100).toFixed(2);
							that.accountInfo= data
							uni.hideLoading();
						}
					})
					['catch'](function (res) {
					uni.hideLoading();
				});
			},

			//收支记录
			getPageList: function () {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				https_1
					.pageList({
						accountType: this.accountType,
						tab: 1,
						current: 1,
						size: 10
					})
					.then(function (res) {
						var data = res.data.accountFlowMiniVO.records;
						data.forEach(function (element) {
							element.amountChange = (element.amountChange / 100).toFixed(2);
							element.accountBalance = (element.accountBalance / 100).toFixed(2);
						});
						that.recordsList=data
						uni.hideLoading();
					})
					['catch'](function (res) {
					uni.hideLoading();
				});
			},

			//立即充值
			toCharge: function () {
				var that = this;

				if (!/(^[1-9]\d*$)/.test(that.customRechargePrice)) {
					uni.showToast({
						title: '请输入正整数',
						icon: 'none'
					});
					return;
				}

				var chargePrice = 0;

				if (that.customRechargePrice !== '' && that.customRechargePrice > 0) {
					chargePrice = that.customRechargePrice * 100;
				} else {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none'
					});
					return false;
				}

				https_1
					.unifiedOrder({
						openId: uni.getStorageSync('openid'),
						totalFee: chargePrice,
						tradeType: 'JSAPI' // 交易类型：JSAPI -JSAPI支付 NATIVE -Native支付 APP -APP支付
					})
					.then(function (res) {
						if (res.code == 0) {
							var getpar = {
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								paySign: res.data.sign,
								orderNo: res.data.orderNo
							};
							that.orderNo=res.data.orderNo
							that.gopay(getpar);
						}
					});
			},

			//调起支付
			gopay: function (data) {
				var that = this;
				uni.requestPayment({
					timeStamp: data.timeStamp + '',
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'MD5',
					paySign: data.paySign,
					success: function () {
						that.getUserMoney(data.orderNo);
					},
					fail: function () {
						uni.showModal({
							title: '消息提示',
							content: '充值失败',
							showCancel: false
						});
					}
				});
			},

			//查询充值结果
			getUserMoney: function (orderNo) {
				var that = this;
				uni.showLoading({
					title: '查询余额...',
					mask: true
				});
				https_1
					.orderQuery({
						orderNo: orderNo
					})
					.then(function () {
						uni.showModal({
							title: '消息提示',
							content: '充值成功',
							showCancel: false
						});
						that.customPrice ='',
							that.priceType= 0,
							that.customRechargePrice= 30
						that.getAccountInfo();
						uni.hideLoading();
					});
			},

			//申请退款
			goRefund: function () {
				uni.navigateTo({
					url: '../refund/refund'
				});
			},

			//选择充值类型
			checkPriceType: function (e) {
				this.priceType= e.currentTarget.dataset.index,
					this.customRechargePrice= this.priceTypeList[e.currentTarget.dataset.index],
					this.customPrice= ''
			},

			//输入时触发（自定义充值金额）
			getCustomPrice: function (e) {
				this.priceType= -1,
					this.customPrice= e.detail.value,
					this.customRechargePrice= e.detail.value
			},

			//收支记录（查看更多）
			goReRecord: function () {
				uni.navigateTo({
					url: '../reRecord/reRecord?accountType=' + this.accountType
				});
			},

			//去充电
			goCharing: function () {
				uni.redirectTo({
					url: '/packageFunctional/sitelist/sitelist'
				});
			},

			//弹框
			BulletFrame:function () {
				var th = this
				https_1
				.getContent({
					sonEnum:'CAR_REFILL'
				})
				.then(function (res) {
					if(res.code === 0){
						th.frame.val = res.data
					}
					th.$refs.showBulletFrame.open()
				})
			},

			showFrame:function () {
				this.$refs.showBulletFrame.close()
			}
		}
	};
</script>
<style lang="less">
    /* mine/pages/personalAccount/personalAccount.wxss */
    @import "../../../commin/commin.less";

    page {
        background-color: @text-color6;
    }

    .personalBox {
		position: relative;
        .margins(16rpx, 24rpx, 0rpx, 24rpx);
        padding-bottom: 30rpx;
        .account {
            display: flex;
            justify-content: center;
            text-align: center;
            background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .paddings(56rpx, 35rpx, 0, 83rpx);

            .account_l {
                margin-right: 131rpx;

                .txt1 {
                    .fontsize(64rpx);
                    font-family: DIN;
                    font-weight: bold;
                    color: @text-color1;
                }

                .txt2 {
                    .fontsize(24rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    .margins(24rpx, 0, 48rpx, 0);
                    .tipImg{
                        .kuangao(26rpx,26rpx);
                        margin-left: 15rpx;
                    }
                }

                .txt3 {
                    .kuangao(180rpx, 64rpx);
                    .lineheight(64rpx);
                    text-align: center;
                    background: rgba(20, 135, 250, 0.06);
                    border-radius: 32px;
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @blue;
                    margin-left: 15rpx;
                }

                .balanceFreeze{
                    position: absolute;
                    .kuangao(244rpx,64rpx);
                    line-height: 64rpx;
                    text-align: center;
                    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
                    .borders(2rpx,@white-color);
                    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: -40rpx;
                    margin-left: -24rpx;
                }
            }

            .account_r {
                .txt1 {
                    .fontsize(64rpx);
                    font-family: DIN;
                    font-weight: bold;
                    color: @text-color1;
                }

                .txt2 {
                    .fontsize(24rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: 24rpx;
                    .tipImg{
                        .kuangao(26rpx,26rpx);
                        margin-left: 15rpx;
                    }
                }

                .img {
                    .kuangao(229rpx, 156rpx);
                }
                .jiangLiBalance{
                    position: absolute;
                    .kuangao(244rpx,64rpx);
                    line-height: 64rpx;
                    text-align: center;
                    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
                    .borders(2rpx,@white-color);
                    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color3;
                    margin-top: -150rpx;
                }
            }
        }
        .account1{
            background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
            .borders(2rpx, @white-color);
            margin-bottom: 16rpx;
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .accountMoney{
                .tip{
                    position: absolute;
                    margin-top: -65rpx;
                    right: 130rpx;
                    .fontsize(20rpx);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: @text-color4;
                }
            }
            .txt1 {
                text-align: center;
                .fontsize(64rpx);
                margin-top: 74rpx;
                font-family: DIN;
                font-weight: bold;
                color: @text-color1;
            }

            .txt2 {
                text-align: center;
                .fontsize(24rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @text-color3;
                margin-top: 24rpx;
            }

            .img {
                .kuangao(229rpx, 156rpx);
                margin-top: -80rpx;
            }
        }

        .setting {
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            .lineheight(60rpx);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
            .margins(16rpx, 0rpx, 16rpx, 0rpx);
            .paddings(40rpx, 32rpx, 37rpx, 32rpx);

            .setting_title {
                display: flex;
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @text-color2;
                .tips{
                    .fontsize(22rpx);
                    color: @text-color4;
                    margin-left: 20rpx;
                }
            }

            .priceType {
                display: flex;
                flex-wrap: wrap;

                .type {
                    .kuangao(170rpx, 64rpx);
                    .lineheight(64rpx);
                    background: #F5F7FA;
                    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
                    text-align: center;
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;
                    .margins(36rpx, 24rpx, 0, 0);
                }

                .type_action {
                    background: rgba(20, 135, 250, 0.06);
                    .borders(1rpx, @blue);
                    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @blue;
                }

                .custom {
                    display: flex;
                    align-items: center;
                    margin-top: 36rpx;
                    .fontsize(30rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;

                    .custom_img {
                        margin-left: 23rpx;
                        .kuangao(26rpx, 27rpx);
                    }

                    .custom_input {
                        .kuan(150rpx);
                        text-align: center;
                        .fontsize(28rpx);
                        color: @text-color3;
                        border-bottom: 1rpx solid @text-color3;
                    }
                }
            }

            .setting_btn {
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @white-color;
                margin: 40rpx auto 0;
                .kuangao(270rpx, 88rpx);
                .lineheight(88rpx);
                text-align: center;
                background: linear-gradient(105deg, #2B99FF, #1B8CF5);
                box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
                border-radius: 44rpx;
            }
        }

        .record {
			min-height: 75vh;
            margin-bottom: 40rpx;
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            // .paddings(40rpx,32rpx,40rpx,32rpx);
            .borders(2rpx, @white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            border-radius: 16rpx;

            .record_top {
                display: flex;
                justify-content: space-between;
                .paddings(40rpx, 32rpx, 24rpx, 32rpx);
                border-bottom: 1rpx solid @text-color5;
            ;

                .title {
                    .fontsize(34rpx);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: @text-color2;
                }

                .more {
                    display: flex;
                    align-items: center;
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @blue;

                    .img {
                        .kuangao(11rpx, 18rpx);
                        margin-left: 12rpx;
                    }
										.txtIcon {
											line-height: 1;
											margin-left: 4rpx;
										}
                }
            }
            .record_item{
                .margins(40rpx,32rpx,0,32rpx);
                padding-bottom: 40rpx;
                border-bottom: 1rpx dashed #C0C4CC;
                .itemDisplay{
                    display: flex;
                    justify-content: space-between;
                    .itemTitle{
                        display: flex;
                        align-items: center;
                        margin-bottom: 23rpx;
                        .name{

                            .kuan(350rpx);
                            overflow:hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            -o-text-overflow:ellipsis;
                            .fontsize(30rpx);
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: @text-color1;

                        }
                        .tag{
                            margin-left: 16rpx;
                            .kuangao(118rpx,32rpx);
                            .lineheight(32rpx);
                            .borders(1rpx,@blue);
                            text-align: center;
                            background: rgba(20, 135, 250, 0.06);
                            border-radius: 16rpx;
                            .fontsize(22rpx);
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: @blue;
                        }
                    }
                    .changeAmount{
                        .fontsize(34rpx);
                        font-family: DIN;
                        font-weight: bold;
                        color: @text-color1;
                    }
                    .changeAmount1{
                        .fontsize(34rpx);
                        font-family: DIN;
                        font-weight: bold;
                        color: @orange;
                    }
                    .balance{
                        display: flex;
                        .fontsize(26rpx);
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: @text-color3;
                        .money{
                            color: @orange;
                        }
                    }
                    .time{
                        .fontsize(24rpx);
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: @text-color3;
                    }

                }
            }
            .record_item:last-child { border-bottom: 0rpx;}
        }
    }
    .goCharing{
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @blue;
        padding-bottom: 50rpx;
        text-align: center;
    }

	.comImg{
		position: absolute;
		width: 100%;
		top: 0rpx;
	}
	.infoCon{
		display: flex;
		justify-content: center;
		position: relative;
		padding-top: 62rpx;
	}
	.infoLeft{
		width: 100%;
		margin-left: 33rpx;
		.accountTitle{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.accountVal{
			position: relative;
			margin-top: 45rpx;
			font-size: 64rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.tip{
	    .fontsize(20rpx);
	    font-weight: 400;
	    color: #FFFFFF;
		margin-left: 32rpx;
	}

	.infoRecord{
		margin-left: 34rpx;
		padding: 3rpx 15rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 16rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6EB12F;
		font-weight: 400;
	}

	.BulletFrameCon{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC;
		.bulletTitle{
			padding:45rpx 0rpx 40rpx 0rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;
		}
		.bulletVal{
			font-size: 30rpx;
			font-weight: 500;
			color: #303133;
			line-height: 45rpx;
			padding: 0 35rpx;
		}
		.bulletButton{
			margin-top: 86rpx;
			text-align: center;
			border-top: 1rpx solid #DCDFE6;
			padding: 40rpx 0;
			font-weight: bold;
			color: var(--textColor);
			font-size: 30rpx;
		}
	}

</style>
